@extends('mobile.layouts.default')
@section('title', '泰国手机充值')
@section('description', '泰国手机充值方便快捷，微信支付结算，支持TRUEMOVE、AIS、DTAC、MY等4大运营商')

@section('content')
    <nav class="nav navbar-light w-100">
        <div class="container d-flex flex-row justify-content-between align-items-center">
            <div class="back-ico mr-2">
                <a class="fas fa-chevron-left" href="#"></a>
            </div>
            <div class="nav-title position-absolute w-100 text-center">
                <span>泰国手机充值</span>
            </div>
            {{-- 没有empty的话，对齐就会出问题 --}}
            <div class="empty flex-grow-1"></div>
            <div class="header-user mr-3 kf_open">
                <i class="fas fa-headset"></i>
            </div>
            @if(Auth::check())
            <div class="btn-group user-dropdown">
                <i class="fas fa-list" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></i>
                <div class="dropdown-menu dropdown-menu-right">
                    <a class="dropdown-item" href="#">
                        <i class="fas fa-user"></i> {{ Auth::user()->name }}
                    </a>
                    <a class="dropdown-item" href="{{ route('credit.record') }}">
                        <i class="fas fa-coins"></i> 积分:{{ Auth::user()->credit_score }}
                    </a>
                    <a class="dropdown-item" href="{{ route('recharge.record') }}">
                        <i class="fas fa-list"></i> 充值记录
                    </a>
                    <form action="{{ route('user.logout') }}" method="POST" id="logout">
                        {{ csrf_field() }}
                        {{ method_field('DELETE') }}
                        <a class="dropdown-item" onclick="document.getElementById('logout').submit();return false;">
                            <i class="fas fa-sign-out-alt"></i> 退出登录
                        </a>
                    </form>
                </div>
            </div>
            @else
            <div class="header-share">
                <a href="{{ route('recharge.record') }}" class="fas fa-list"></a>
            </div>
            @endif
        </div>
    </nav>

    <div class="alert alert-warning position-fixed fixed-top" role="alert">
        <span></span>
    </div>
    <div class="alert alert-danger position-fixed fixed-top" role="alert">
        <span></span>
    </div>

    <div class="recharge-header container d-flex flex-column">
        @if(Auth::check())
        <div class="recharge-history mt-2">
            @if(count($user_num_histories))
            <ul class="d-flex list-unstyled align-items-center recharge-history-select">
                @foreach($user_num_histories as $user_num_history)
                    <li data-phonenum="{{ $user_num_history->cellphone_num }}">{{ user_history($user_num_history->cellphone_num) }}</li>
                @endforeach
                <a class="fas fa-pen recharge-history-edit ml-2" href="{{ route('recharge.history.edit') }}"></a>
            </ul>
            @else
            <ul class="d-flex list-unstyled align-items-center">
                <span style="font-size: 14px; opacity: .6">暂无充值记录</span>
            </ul>
            @endif
        </div>
        @else
        <div class="recharge-history mt-2">
            <ul class="d-flex list-unstyled align-items-center">
                <a href="{{ route('user.create') }}"><li class="active">登录/注册</li></a>
            </ul>
        </div>
        @endif
        <div class="recharge-input">
            <div class="form-row">
                @if(Auth::check())
                <div class="form-group col-3 mb-0"  id="rechargeTypeArae">
                    <label for="recharge-type" class="recharge-type-fa">规则 <span class="far fa-question-circle"></span></label>
                    <select class="form-control recharge-type" id="rechargeType">
                        <option value="mtopup">预付费</option>
                        <option value="billpay">后付费</option>
                    </select>
                </div>
                @else
                <div class="form-group col-3 mb-0"  id="rechargeTypeArae">
                    <label for="recharge-type" class="recharge-type-fa">规则 <span class="far fa-question-circle"></span></label>
                    <select class="form-control recharge-type" id="rechargeType" disabled="disabled">
                        <option value="mtopup">预付费</option>
                        <option value="billpay">后付费</option>
                    </select>
                </div>
                @endif
                <div class="form-group mb-0 col-9" id="rechargeNumArae">
                    <label for="country">泰国号码(06/08/09开头)</label>
                    <input type="text" name="" value="" class="position-relative" id="rechargeNum" autocomplete="off" maxlength="14" placeholder="请输入泰国手机号码">
                    <i class="fas fa-times-circle position-absolute clear-recharge-num"></i>
                </div>
            </div>
        </div>
        <div class="recharge-operators mt-3">
            <ul class="d-flex list-unstyled">
                @foreach($operators as $operator)
                    <li data-operator="{{ $operator->name }}">{{ $operator->name }}</li>
                @endforeach
            </ul>
        </div>
        <div class="recharge-tab mt-3">
            <ul class="d-flex list-unstyled m-0 align-items-end" data-is-aop="0">
                <li class="w-50 active recharge-phone"><img src="/assets/mobile/images/tab01.png" width="15" height="20"> 话费充值</li>
                <li class="w-50 recharge-web"><img src="/assets/mobile/images/tab02.png" width="15" height="20"> 流量套餐</li>
            </ul>
        </div>
    </div>

    <div class="recharge-body container">
        <div class="recharge-today-rate mt-3">
            <span>今日汇率：1人民币 = {{ number_format(get_exchange_rate (), 2) }}泰铢</span>
        </div>
        <div class="recharge-select-inner recharge-phone-box num-disable">
            <div class="recharge-select-items mt-3">
                <ul class="d-flex list-unstyled flex-wrap recharge-phone-ul">
                    @include('mobile.layouts._recharge_item', ["recharge_packages" => $recharge_packages])
                </ul>
            </div>
        </div>

        <div class="recharge-select-inner recharge-web-box num-disable">
            @include('mobile.layouts._recharge_web_item', ["recharge_package_webs" => $recharge_package_webs])
        </div>
    </div>
    <div class="recharge-banner container b4con">
        <div class="recharge-banner-body invit">
            <img src="/assets/mobile/images/banner01.png" class="w-100" alt="">
        </div>
    </div>

    @if(Auth::check())
    {{-- 支付弹窗 --}}
    <div class="modal" id="payBox" data-backdrop="static">
        <div class="modal-dialog m-0 fixed-bottom">
            <div class="modal-content rounded-0">
                <div class="container pay-body bg-white w-100 d-flex flex-column">
                    <div class="pay-header d-flex justify-content-between align-items-center position-static mt-3">
                        <p class="text-center w-100"><b>确认订单</b></p>
                        <span data-toggle="modal" id="closePay" class="position-absolute" data-dismiss="modal">&times;</span>
                    </div>
                    <div class="pay-detail" data-recharge-id="">
                        <ul class="d-flex flex-column no-gutters p-0">
                            <li>
                                <span>订单名称</span>
                                <b class="ensure-order"></b>
                            </li>
                            <li>
                                <span>充值号码</span>
                                <b class="ensure-num"></b>
                            </li>
                            <li>
                                <span>订单金额</span>
                                <b class="ensure-th"></b>
                            </li>
                            <li>
                                <span>当前汇率</span>
                                <b>{{ number_format(get_exchange_rate (), 2) }}</b>
                            </li>
                            <li>
                                <span>服务运营商</span>
                                <b class="ensure-opteror"></b>
                            </li>
                            <li>
                                <span>使用积分 <i class="badge badge-secondary far fa-question-circle credit-fa" id="creditScore" data-credit-score="{{ Auth::user()->credit_score }}"> 可用:{{ Auth::user()->credit_score }}</i></span>
                                @if(Auth::user()->credit_score < 100)
                                <div class="custom-control custom-switch">
                                    <input type="checkbox" class="custom-control-input" disabled id="creditSwitch">
                                    <label class="custom-control-label credit-control-input-disable" for="creditSwitch"></label>
                                </div>
                                @else
                                <div class="custom-control custom-switch">
                                    <input type="checkbox" name="credit-switch" class="custom-control-input" id="creditEnoughSwitch">
                                    <label class="custom-control-label enough-label" for="creditEnoughSwitch"></label>
                                </div>
                                @endif
                            </li>
                        </ul>
                    </div>
                    <div class="web-desc mt-3 p-2">
                        <h6><b>套餐详情：</b></h6>
                        <pre class="web-desc-body"></pre>
                    </div>
                    <div class="pay-copyright mt-3 p-2">
                        <p>1、请认真核对充值号码，充值号码错误无法退款；</p>
                        <p>2、如果充值失败，充值金额将原路退回；</p>
                    </div>
                    <div class="pay-checkout text-left mt-3 pb-3 pt-3 d-flex justify-content-between align-items-end">
                        <p class="m-0">金额：￥<strong class="ensure-cn" id="creditTarget"></strong>元<br><small style="display: none;"></small></p>
                        <button type="button" class="btn btn-primary ensure-pay">确认支付</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif

    {{-- 积分规则 --}}
    <div class="modal" id="creditInfo">
        <div class="modal-dialog modal-dialog-centered d-flex justify-content-center">
            <div class="modal-content credit-content w-75 p-3">
                <div class="credit-header text-center">
                    <b>积分使用规则</b>
                </div>
                <div class="credit-boy mt-3">
                    <b class="mt-2">获取方式</b>
                    <ul class="no-gutters mt-2">
                        <li>1.分享海报到微信朋友圈。 <span class="badge badge-primary invit-2">获取海报</span></li>
                        <li>2.新用户通过识别海报自动注册为新会员即可获得100积分。</li>
                    </ul>
                    <b class="mt-2">使用条件</b>
                    <ul class="no-gutters mt-2">
                        <li>1.订单金额大于等于20元。</li>
                        <li>2.积分数量大于等于100。</li>
                        <li>3.积分支付不得超过单笔订单应付金额的50%。</li>
                    </ul>
                    <b class="mt-2">使用数量</b>
                    <ul class="no-gutters mt-2">
                        <li>1.使用积分数量为100的整数倍。</li>
                        <li>2.100积分抵扣1元人民币。</li>
                    </ul>
                </div>
                <div class="credit-ok mt-3 d-flex justify-content-center">
                    <button type="button" class="btn btn-primary w-75 btn-sm" data-dismiss="modal">我知道了</button>
                </div>
            </div>
        </div>
    </div>

    {{-- 充值规则 --}}
    <div class="modal" id="rechargeTypeInfo">
        <div class="modal-dialog modal-dialog-centered d-flex justify-content-center">
            <div class="modal-content credit-content w-75 p-3">
                <div class="credit-header text-center">
                    <b>充值规则</b>
                </div>
                <div class="credit-body mt-3">
                    <ul class="no-gutters mt-2">
                        <li>1.<u>TRUEMOVE</u>和<u>DTAC</u>的号码分预付费、后付费两种类型，请正确选择您的卡类型。</li>
                        <li>2.<u>cmlink(中国移动和TRUEMOVE合作的卡)</u>、<u>iSIM</u>，不能通过本系统充值。</li>
                        <li>3.<u>AIS</u>和<u>MY</u>的号码仅支持预付费类型，后付费类型不能通过本系统充值。</li>
                        <li>4.类型选择错误导致充值失败的，款项会原路自动退回。</li>
                        <li>5.后付费类型卡充值最低100泰铢起。</li>
                        <li>6.如有其他问题，请联系客服。</li>
                    </ul>
                </div>
                <div class="credit-ok mt-3 d-flex justify-content-center">
                    <button type="button" class="btn btn-primary w-75 btn-sm" data-dismiss="modal">我知道了</button>
                </div>
            </div>
        </div>
    </div>

    {{-- 手动切换提示 --}}
    <div class="modal" id="manualSelectOperator">
        <div class="modal-dialog modal-dialog-centered d-flex justify-content-center">
            <div class="modal-content w-75">
                <div class="modal-body p-0">
                    <div class="delete-text p-3">
                    <p>手动切换运营商可能充值失败，请确认您输入的号码和您选择的运营商一致</p>
                    </div>
                    <div class="delete-btn d-flex justify-content-between">
                        <button type="button" class="btn btn-light w-50" data-dismiss="modal">取消</button>
                        <button type="submit" class="btn btn-light w-50 text-danger ensureManualSelectOperator">确认</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- 号码有误提示 --}}
    <div class="modal" id="manualSelectMy">
        <div class="modal-dialog modal-dialog-centered d-flex justify-content-center">
            <div class="modal-content w-75">
                <div class="modal-body p-0">
                    <div class="delete-text p-3">
                    <p>1、您输入的号码有误，请核对后再试。</p>
                    <p>2、如果您正在为MY运营商的号码充值，请关闭本窗口后手动选择运营商。</p>
                    </div>
                    <div class="delete-btn d-flex justify-content-between">
                        <button type="button" class="btn btn-light w-100" data-dismiss="modal">确认</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- 积分海报 --}}
    <div class="modal fade" id="savePicModal">
        <div class="modal-dialog modal-dialog-centered d-flex justify-content-center share-pic-box">
            <div class="modal-content w-75" id="domToImgArea">
                <div class="share-article-body">
                    <img src="" id="shareImg" width="100%">
                    <div class="dzone-share-footer text-center pt-2 pb-2">
                        长按保存分享朋友圈赚取积分咯
                    </div>
                </div>
            </div>
        </div>
    </div>

    @include('mobile.layouts._wait_for_post')

    @include('mobile.layouts.footer')

@stop

@push('page-css')
    <link rel="stylesheet" type="text/css" href="/assets/mobile/css/recharge.css?v14">
@endpush

@push('page-js')
    <script type="text/javascript" src="/assets/mobile/js/recharge.js?v34" charset="utf-8"></script>
    <script type="module" src="/assets/mobile/js/credit-count.js?v04" charset="utf-8"></script>
@endpush
